import axios from "axios";
import React, { useEffect, useState } from "react";
import "./Patient.css"
import type { PaginationProps } from 'antd';
import { Pagination, Input, Button, DatePicker, Space } from 'antd';
import { Link } from "react-router-dom";


interface Props {
    _id: string,
    Medical: string
    Card: string,
    Name: string,
    Sex: string,
    Type: string,
    Documents: string,
    status: string,
    Time: string,
}


const hangpage: PaginationProps['onChange'] = (pageNumber) => {
    console.log('Page: ', pageNumber);
};
const { RangePicker } = DatePicker;


const Patient: React.FC<Props> = () => {
    // 患者就诊查询表
    const [list, setlist] = useState<Props[]>([])
    const [pages, setpages] = useState(1)
    const [num, setnum] = useState(1)
    const [numpage, setnumpage] = useState(1)
    const limit = 5  //每页条数

    // 就诊卡号搜索
    const [cards, setcard] = useState("")
    // 证件号搜索
    const [numbers, setnumber] = useState("")
    // 患者姓名搜索
    const [name, setname] = useState("")

    // 时间
    const [dates, setDates] = useState([null, null]);


    // 状态搜索
    const [starts, setstarts] = useState("")
    // 渲染
    const getlist = (page: number) => {
        axios.get(`http://127.0.0.1:3000/cws/index/?page=${page}&limit=${limit}&card=${cards}&number=${numbers}&name=${name}&starts=${starts}`).then((response) => {
            const { code, data, num, numpage } = response.data
            if (code == 200) {
                setlist(data)
                setnum(num)
                setnumpage(numpage)
            }
        })
    }



    useEffect(() => {
        getlist(pages)
    }, [pages])

    // 分页
    const hangpage = (page: number) => {
        setpages(page)
    }

    // 跳转
   

    // 搜索
    const search = () => {
        getlist(pages)
    }

    const onChange = (dates) => {
        setDates(dates);
    };

    return (
        <div>
            <br></br>
            <br></br>
            <div style={{ width: '100%', height: "100%" }}>
                <div style={{
                    width: "1100px",
                    height: "200px",
                    margin: "0 auto"
                }}>
                    <span>就诊卡号:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setcard(event.target.value)
                    }} />
                    <span style={{ marginLeft: "70px" }}>证件号:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setnumber(event.target.value)
                    }} />
                    <span style={{ marginLeft: "70px" }}>患者姓名:</span>&nbsp;
                    <Input style={{ width: "250px" }} placeholder="请输入" onChange={(event) => {
                        setname(event.target.value)
                    }} />
                    <br></br>
                    <br></br>
                    <div style={{ marginRight: "390px" }}>
                        <span>建档时间:</span>&nbsp;
                        <Space direction="vertical" size={12}>
                            <RangePicker
                                value={dates}
                                onChange={onChange}
                                style={{ width: "250px" }}
                                format="YYYY-MM-DD HH:mm"
                                placeholder={['开始时间', '结束时间']}
                            />
                        </Space>
                        <span style={{ marginLeft: "90px" }}>状态:</span>&nbsp;
                        <select onChange={(event) => {
                            setstarts(event.target.value)
                        }}>
                            <option value="">全部状态</option>
                            <option value="false">正常</option>
                            <option value="true">已注销</option>
                        </select>
                    </div>
                    <div style={{ width: "300px", height: "50px", marginLeft: "900px", marginTop: "-30px" }}>
                        <Button>重置</Button>
                        <Button type="primary" style={{ marginLeft: "20px" }} onClick={() => {
                            search()
                        }}>搜索</Button>
                    </div>
                </div>

            </div>
            <div className="content_c">
                <table cellSpacing={0}>
                    <tr className="table_tr">
                        <td>病历号</td>
                        <td>就诊卡号</td>
                        <td>患者姓名</td>
                        <td>性别</td>
                        <td>证件类型</td>
                        <td>证件号</td>
                        <td>状态</td>
                        <td>建档时间</td>
                        <td>操作</td>
                    </tr>
                    {
                        list.map((item, index) => {
                            return <tr key={index}>
                                <td>{item.Medical}</td>
                                <td>{item.Card}</td>
                                <td>{item.Name}</td>
                                <td>{item.Sex == "false" ? "女" : "男"}</td>
                                <td>{item.Type}</td>
                                <td>{item.Documents}</td>
                                <td>{item.status == "false" ? "正常" : "已注销"}</td>
                                <td>{item.Time}</td>
                                <td>
                                    <Link to={`/disease/${item._id}`} style={{ color: "blue", cursor: "pointer" }}>
                                       患病历史
                                    </Link>
                                </td>


                            </tr>
                        })
                    }
                </table>
                <div className="page">
                    <div style={{
                        width: "500px", marginLeft: "900px", height: "100px"
                    }}>
                        <span style={{ float: "left", lineHeight: "30px", "color": "blue" }}>共有{num}数据</span>
                        <Pagination showQuickJumper defaultCurrent={numpage} total={num} pageSize={limit} onChange={hangpage} />
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Patient